.nom-menu {
  .list-unstyled();

  margin: 0;

  a {
    color: inherit;

    &:hover {
      color: inherit;
    }

    >.text {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    >.subtext {
      margin-left: 6px;
      color: var(--nom-color-text-2);
      font-weight: 400;
    }
  }

  &.p-direction-vertical {
    a {
      &:hover {
        .nom-preset-hover()
      }
    }
  }

  .nom-menu-group-container {
    >.nom-menu-group-title {
      color: var(--nom-menu-group-title-color);
      padding: 10px 0;
      font-size: 85%;
    }
  }

  &.p-direction-horizontal {
    display: flex;
    flex-wrap: wrap;

    >.nom-menu-item-wrapper>.nom-menu-item {
      display: flex;
      align-items: center;
      white-space: nowrap;
      text-decoration: none;

      &:not(.nom-menu-group-title) {
        padding: 10px 15px;
      }
    }

    >.nom-menu-divider {
      position: relative;
      padding: 0 10px;

      &::after {
        position: absolute;
        top: 5px;
        right: 10px;
        bottom: 5px;
        display: block;
        border-right: var(--nom-menu-divider-border);
        content: '';
      }
    }
  }

  &.p-uistyle-line {
    &.p-direction-horizontal {
      >.nom-menu-item-wrapper {
        margin-right: 0.3rem;

        >.nom-menu-item {
          padding: 10px 1rem;
          border-bottom: 2px solid transparent;

          &.s-selected {
            color: var(--nom-color-primary);
            font-weight: 500;
            border-bottom-color: var(--nom-color-primary);
          }
        }

        &+.nom-menu-item-wrapper {
          margin-left: 15px;
        }
      }
    }
  }

  &.p-uistyle-short-line {
    &.p-direction-horizontal {
      >.nom-menu-item-wrapper {
        margin-right: 0.3rem;

        >.nom-menu-item {
          padding: 10px 0;
          border-bottom: 2px solid transparent;

          &.s-selected {
            color: var(--nom-color-primary);
            font-weight: 500;
            border-bottom-color: var(--nom-color-primary);
          }
        }

        &+.nom-menu-item-wrapper {
          margin-left: 15px;
        }
      }
    }
  }

  &.p-uistyle-highlight-text {
    &.p-direction-horizontal {
      >.nom-menu-item-wrapper {
        margin-right: 0.3rem;

        >.nom-menu-item {
          padding: 10px 0;

          &.s-selected {
            color: var(--nom-color-primary);
            font-weight: 500;
          }
        }

        &+.nom-menu-item-wrapper {
          margin-left: 15px;
        }
      }
    }
  }

  &.p-uistyle-pill {
    &.p-direction-vertical {
      >.nom-menu-item-wrapper {
        margin-bottom: 0.3rem;
      }
    }

    &.p-direction-horizontal {
      >.nom-menu-item-wrapper {
        margin-right: 0.3rem;
      }
    }

    >.nom-menu-item-wrapper {
      .nom-menu-item {
        background-color: rgba(var(--nom-color-primary-base), 0.075);
        .u-shape-round();

        &:hover {
          color: var(--nom-color-white);
          background-color: var(--nom-color-primary-hover);
        }

        &.s-selected {
          .u-color-primary();
        }
      }
    }
  }

  &.p-direction-vertical:not(.nom-menu-compact) {
    .nom-menu-item-wrapper>.nom-menu-item {
      display: flex;
      align-items: center;
      text-decoration: none;

      &:not(.nom-menu-group-title) {
        padding: 10px 15px;
      }

      >.nom-menu-item-icon {
        margin-right: 0.5rem;
      }

      >.title {
        flex-grow: 1;
      }
    }

    .nom-menu-divider {
      position: relative;
      padding: 10px 0;

      &::after {
        position: absolute;
        right: 15px;
        bottom: 10px;
        left: 20px;
        display: block;
        border-top: var(--nom-menu-divider-border);
        content: '';
      }

      &.nom-menu-divider-dashed {
        &::after {
          border-top-style: dashed;
        }
      }
    }
  }
}

.nom-menu-compact {
  >.nom-menu-item-wrapper>.nom-menu-item {
    display: block;
    padding: 10px 4px;
    font-size: 0.75rem;
    text-align: center;
    text-decoration: none;

    >.nom-menu-item-icon {
      font-size: 2rem;
    }

    >*:not(.nom-menu-item-icon):not(.nom-menu-item-title) {
      display: none;
    }

    &.nom-menu-item-submenu-selected {
      color: var(--nom-color-primary);
    }

    &:hover {
      color: var(--nom-color-white);
      background: var(--nom-color-primary);
    }
  }
}

.nom-menu-sub {
  .list-unstyled();

  margin: 0;

  a {
    color: inherit;

    &:hover {
      color: inherit;
      .nom-preset-hover;
    }
  }

  >.nom-menu-item-wrapper>.nom-menu-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;

    &:not(.nom-menu-group-title) {
      padding: 10px 15px;
    }

    >.title {
      flex-grow: 1;
    }
  }

  &.p-direction-horizontal {
    >.nom-menu-item-wrapper>.nom-menu-item {
      min-width: 160px;
    }
  }

  &.nom-menu-popup-sub {
    >.nom-menu-item-wrapper>.nom-menu-item {
      &.s-selected {
        color: var(--nom-color-primary);
      }
    }
  }
}

&.nom-menu-stretch {
  height: 100%;

  >.nom-menu-item-wrapper>.nom-menu-item {
    height: 100%;
  }
}

.nom-menu-toggler {
  margin-left: auto;
}